<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  ready: {
    type: Boolean,
    default: false,
  },
})

const isNoData = computed(() => {
  return props.ready && !props.data.length
})
</script>

<template>
  <section class="monitor-grid">
    <div class="monitor-grid__wrap">
      <div v-for="(item, index) in data" :key="index" class="monitor-grid__player">
        <MonitorPlayer :src="item" :ready="ready" />
      </div>
    </div>
    <UiEmpty v-show="isNoData" text="暂无监控设备" />
  </section>
</template>

<style lang='scss' scoped>
.monitor-grid {
  height: 100%;
  padding: 40px 0;

  &__wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
</style>
